<template>
    <Form ref="form" :model="data" :rules="rules" :label-width="labelWidth" :label-position="labelPosition">
        <Row :gutter="24" type="flex" justify="end">
            <Col v-bind="grid">
                <FormItem label="用户名：" prop="userName" label-for="userName">
                    <Input v-model="data.userName"  placeholder="请输入用户名" element-id="userName" />
                </FormItem>
            </Col>
            <Col v-bind="grid">
                <FormItem label="手机号：" prop="mobilePhone" label-for="mobilePhone">
                    <Input v-model="data.mobilePhone" maxlength="11" placeholder="请输入手机号" element-id="mobilePhone" />
                </FormItem>
            </Col>
            <template v-if="collapse">
                <Col v-bind="grid">
                    <FormItem label="邮箱：" prop="email" label-for="email">
                        <Input v-model="data.email" placeholder="请输入邮箱" element-id="email" />
                    </FormItem>
                </Col>
                <Col v-bind="grid">
                    <FormItem label="性别：" prop="genderCode" label-for="genderCode">
                        <Select v-model="data.genderCode" placeholder="请选择性别" element-id="genderCode">
                            <Option :value="0">全部</Option>
                            <Option :value="1">男</Option>
                            <Option :value="2">女</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col v-bind="grid">
                    <FormItem label="登录账号：" prop="account" label-for="account">
                        <Input v-model="data.account" placeholder="请输入登录账号" element-id="account" />
                    </FormItem>
                </Col>
                <Col v-bind="grid">
                    <FormItem label="用户 ID：" prop="id" label-for="id">
                        <Input v-model="data.id" placeholder="请输入用户 ID" element-id="id" />
                    </FormItem>
                </Col>
                <Col v-bind="grid">
                    <FormItem label="状态：" prop="useStateCode" label-for="useStateCode">
                        <Select v-model="data.useStateCode" placeholder="请选择状态" element-id="useStateCode">
                            <Option :value="0">全部</Option>
                            <Option :value="1">正常</Option>
                            <Option :value="2">冻结</Option>
                            <Option :value="3">关闭</Option>
                        </Select>
                    </FormItem>
                </Col>
                 <Col v-bind="grid"></col>
            </template>
            <Col v-bind="grid" class="ivu-text-right">
                <FormItem>
                    <Button type="primary" @click="handleSubmit">查询</Button>
                    <Button class="ivu-ml-8" @click="handleReset">重置</Button>
                    <a v-font="14" class="ivu-ml-8" @click="collapse = !collapse">
                        <template v-if="!collapse">
                            展开 <Icon type="ios-arrow-down" />
                        </template>
                        <template v-else>
                            收起 <Icon type="ios-arrow-up" />
                        </template>
                    </a>
                </FormItem>
            </Col>
        </Row>
    </Form>
</template>
<script>
    import { mapState } from 'vuex';
    export default {
        data () {
            return {
                grid: {
                    xl: 8,
                    lg: 8,
                    md: 12,
                    sm: 24,
                    xs: 24
                },
                collapse: false,
                data: {
                    id: '',
                    userName: '',
                    mobilePhone: '',
                    email: '',
                    genderCode: 0,
                    account: '',
                    useStateCode: 0,
                    foundTime: []
                },
                rules: {
                }
            }
        },
        computed: {
            labelWidth () {
                return  100;
            },
            labelPosition () {
                return 'right';
            }
        },
        methods: {
            handleSubmit () {
                this.$emit('on-submit', this.data);
            },
            handleReset () {
                this.$refs.form.resetFields();
                this.$emit('on-reset');
            }
        }
    }
</script>
